<template>
    <div id="div">
        <el-col :span="24" class="qqq">
            <div>
                <el-col :span="24">
                    <div class="rightHead">
                        <span class="s1">角色管理</span>
                        <span class="s2"></span>
                        <span class="exit">退出登录</span>
                    </div>
                </el-col>
            </div>
            <div class="d-t"></div>
            <div class="d-e">
                <div class="d-e-con">
                    <input class="d-in1" placeholder="请输入内容" v-model="input2" type="text">
                    <button class="d-btn1" @click="query2">搜索</button>
                </div>
            </div>
            <button class="d-btn3" @click="dialogVisible11= true">新建角色</button>
            <div  id="d_div1">
                <div style="width: 900px; background-color: white;margin-left:60px; margin-top: 30px ">
                    <el-row :gutter="20">
                        <el-col :span="18">
                            <div>
                            </div>
                            <div class="grid-content bg-purple d_div2" :style="{'height':H+'px'}">
                                <el-table
                                        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                                        stripe
                                        style="width: 100%"
                                        :default-sort = "{prop: 'date', order: 'ascending'}">
                                    <el-table-column
                                            prop="id"
                                            label="角色ID"
                                            width="120">
                                    </el-table-column>
                                    <el-table-column
                                            prop="name"
                                            label="角色名称"
                                            width="160">
                                    </el-table-column>
                                    <el-table-column
                                            prop="power"
                                            label="基本权限"
                                            width="200">
                                    </el-table-column>
                                    <el-table-column
                                            prop="hpower"
                                            label="操作权限"
                                            width="300">
                                    </el-table-column>
                                    <el-table-column
                                            prop="operation"
                                            label="操作"
                                            width="120">

                                        <template slot-scope="scope">
                                            <a @click="active(scope.$index,scope.row)" type="text" size="small"  style="cursor:pointer">编辑</a>
                                            &nbsp;
                                            <a @click="handleDelete(scope.$index,scope.row)" type="text" size="small"  style="cursor:pointer">删除</a>
                                        </template>
                                    </el-table-column>
                                </el-table>

                                <!--              弹框-->
<!--                                新建-->
                                <el-dialog
                                    title="新建管理员"
                                    :visible.sync="dialogVisible11"
                                    width="40%"
                                    style="text-align: left"
                            >
                                <hr>
                                    <p class="d-p1">
                                        <span class="d-t-sp">角色名称：</span>
                                        <input class="d-t-in" v-model="tk_name"  type="text">
                                        <span class="d-t-sp" style="margin-left:-20px">角色选择:</span>
                                        <el-select v-model="valuea" placeholder="请选择" style="width: 190px"  >
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </p >

                                    <p class="d-p2">
                                        <span class="d-t-sp">基本权限：</span>
                                        <input class="d-t-in" v-model="tk_power" type="text">
                                    </p>
                                    <p class="d-p3">
                                        <span class="d-t-sp">操作权限：</span>
                                        <textarea class="d-t-in" v-model="tk_hpower"  type="text" style="font-size: 16px">
                                        </textarea>
                                    </p>

                                <span slot="footer" class="dialog-footer" style="width: 500px; margin-top: 50px">
                                    <el-button @click="dialogVisible11 = false">取 消</el-button>
                                    <el-button type="primary" @click="addrole">确 定</el-button>
                                </span>
                            </el-dialog>
<!--                                编辑-->
                                <el-dialog
                                        title="基本信息"
                                        :visible.sync="dialogVisible"
                                        width="40%" style="text-align: left">
                                    <p class="d-p1">
                                        <span class="d-t-sp">ID：</span>
                                        <span :v-model="tk_id" >{{tk_id}}</span>
                                        <span class="d-t-sp">角色名称：</span>
                                        <input class="d-t-in" v-model="tk_name" type="text">
                                    </p >
                                    <p class="d-p2">
                                        <span class="d-t-sp">基本权限：</span>
                                        <input class="d-t-in" v-model="tk_power" type="text">
                                    </p>
                                    <p class="d-p3">
                                        <span class="d-t-sp">操作权限：</span>
                                        <textarea class="d-t-in" v-model="tk_hpower" type="text" style="font-size: 16px">

                                        </textarea>
                                    </p>
                                    <i slot="footer" class="dialog-footer" >
                                        <el-button type="primary" @click="updatapower" style="margin-top: 50px">修改</el-button>
                                    </i>
                                </el-dialog>

                            </div>

                        </el-col>

                    </el-row>
                </div>
                <div style="margin-left: -20px;margin-top: 10px">
                    <el-pagination
                            layout="total, prev, pager, next,jumper"
                            @current-change="current_change"
                            :total="total"
                            :page-size="pagesize"
                            background
                    >
                    </el-pagination>
                </div>

            </div>
        </el-col>
    </div>
</template>

<style lang="less">
    .rightHead{
        width: 1020px;
        background: white;
        height: 60px;
        line-height: 60px;
        text-align: left;
    }
    .d-t{
        width: 100%;
        height: 56px;
        background: white;
        border-top-right-radius: 20px;

    }
    .d-btn3{
        width: 100px;
        height: 30px;
        cursor: pointer;
        margin-left: -800px;
        margin-top: 20px;
        border-radius: 3px;
        border: none;
        color: white;
        background: #FD5056;
    }
    .d-e{
        width: 900px;
        height: 56px;
        background: white;
        border-radius: 5px;
        margin: 10px auto 0;
        .d-e-con{
            text-align: left;
            line-height: 56px;
            .d-sp1{
                display: inline-block;
                margin-left: 20px;
                font-size: 16px;
            }
            .d-in1{
                width: 200px;
                height: 28px;
                border-radius: 4px;
                border: 1px solid rgb(192,192,192);
            }
            .d-btn1{
                width: 80px;
                height: 30px;
                border-radius: 3px;
                border: none;
                color: white;
                background: #3696FF;
                margin-top: 3px;
                margin-left: 20px;
            }
            .d-btn2{
                width: 80px;
                height: 30px;
                border-radius: 3px;
                border: none;
                color: white;
                background: #21B9BC;
                margin-left: 20px;
            }
        }

    }
    .s1{
        margin-left: 50px;
        font-size: 18px;
    }
    .s2{
        display: inline-block;
        width: 750px;
    }
    .exit{
        display: inline-block;
        text-align: center;
        border: none;
        margin-left:10px;
        cursor: default;
    }
    .G-btn1{
        width: 90px;
        height: 34px;
        border: 1px solid #409EFF;
        color: blueviolet;
        background: white;
        font-size: 14px;
        border-radius: 4px;
        margin-top: 40px;
        margin-left: 250px;
        cursor: pointer;
    }
    .d-p1{
        margin-top: 20px;
        height: 50px;
        line-height: 50px;
        .d-t-sp{
            display: inline-block;
            width: 100px;
            font-size: 18px;
            font-weight: bold;
            text-align: right;
            margin-left: 50px;
        }
        .d-t-in{
            /*width: 100px;*/
            height: 30px;
            border-radius: 2px;
            border: 1px solid #DCDFE6;
            text-align: center;
        }
    }
    .d-p2{
        height: 50px;
        line-height: 50px;
        .d-t-sp{
            display: inline-block;
            width: 100px;
            font-size: 18px;
            font-weight: bold;
            text-align: right;
            margin-left: 50px;
        }
        .d-t-in{
            /*width: 100px;*/
            height: 30px;
            border-radius: 2px;
            border: 1px solid #DCDFE6;
        }
    }
    .d-p3{
        height: 50px;
        line-height: 50px;
        .d-t-sp{
            /*display: inline-block;*/
            width: 100px;
            font-size: 18px;
            font-weight: bold;
            text-align: right;
            margin-left: 50px;
        }
        .d-t-in{
            /*width: 100px;*/
            height: 100px;
            width:500px;
            border-radius: 2px;
            border: 1px solid #DCDFE6;
        }
    }
</style>

<script>
    export default {
        inject:['reload'],
        created: function () {
            let height2 = document.documentElement.clientHeight;
            this.H = height2 - 270;
            this.$axios({
                url:'/api/getpower',
                method:'post',
                data:{}
            }).then((res)=>{
                for (let i = 0; i < res.data.length; i++) {
                    let arr = {
                        id:res.data[i].r_id,
                        name: res.data[i].r_name,
                        power: res.data[i].r_describe,
                        hpower: res.data[i].r_introduce,
                    };
                    this.tableData.push(arr);
                }
            })
        },
        mounted:function () {
            this.$axios({
                url:'/api/getselect',
                method:'post',
                data:{},
            }).then((res)=>{
                for(let i=0; i<res.data.length; i++){
                    let arr={
                        value:res.data[i].j_id,
                        label: res.data[i].j_name
                    };
                    this.options.push(arr)
                }
            })
        },
        data(){
            return{
                valuea:'',
                H:0,
                total:0,
                pagesize:10,//每页的数据条数
                pagesize:10,//每页的数据条数
                currentPage:1,//默认开始页面
                tableData: [],
                options:[],
                dialogVisible: false,
                dialogVisible11:false,
                tk_id:0,
                input2:'',
                tk_name:'',
                tk_power:'',
                tk_hpower:'',
            }
        },

        methods: {
            current_change: function (currentPage) {
                this.currentPage = currentPage;
            },
            active(index, row) {
                this.dialogVisible = true;
                this.tk_id = row.id;
                this.tk_name = row.name;
                this.tk_power = row.power;
                this.tk_hpower = row.hpower;
            },
            handleDelete(index, row) {
                this.$axios({
                    url: '/api/powerdele',
                    method: 'post',
                    data: {
                        id: row.id
                    }
                }).then((res) => {
                    if (res.data.error) {
                        alert('不能删除,有用户拥有该权限')
                    } else {
                        this.reload();
                        alert('删除成功');
                    }
                })
            },
            updatapower() {
                this.$axios({
                    url: '/api/updatapower',
                    method: 'post',
                    data: {
                        id: this.tk_id,
                        name: this.tk_name,
                        power: this.tk_power,
                        hpower: this.tk_hpower,
                    }
                })

                this.dialogVisible = false;
                this.reload();
            },
            addrole() {
                this.$axios({
                    url: '/api/addrole',
                    method: 'post',
                    data: {
                        name: this.tk_name,
                        power: this.tk_power,
                        hpower: this.tk_hpower,
                        laber: this.valuea,
                    }
                }).then((res) => {
                    this.reload();
                    alert('添加成功');
                })
                this.dialogVisible11 = false;
                this.reload();
            },
            query2() {
                this.tableData = [];
                this.$axios({
                    method: 'post',
                    url: '/api/getquery2',
                    data: {
                        input: this.input2
                    }
                }).then((res) => {
                    for (let i = 0; i < res.data.length; i++) {
                        let arr = {
                            id: res.data[i].r_id,
                            name: res.data[i].r_name,
                            power: res.data[i].r_describe,
                            hpower: res.data[i].r_introduce,
                        };
                        this.tableData.push(arr);
                    }
                })

            },
        }
    }
</script>